<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item flex-row")
                div(class="flex-row-item flex-center-center h3 under-line") ---基础率方案---
                div(class="flex-row-item", style="flex:0")
            div(class="flex-column-item flex-row h3" v-for="menu in menus",
            :class="{'selected-text': menu.id == activeId ? true: false}")
                div(class="flex-row-item")
                    span {{menu.name}}
                div(class="flex-row-item center")
                    span {{menu.amount}} U


</template>

<script>
    export default {
        data() {
            return {
                activeId: 0,
                page: {maxResultCount: 3, skipCount: 0}
            };
        },
        computed: {
            menus() {
                const planA = this.getPlanTotal(window.rate.planA.value);
                const planB = this.getPlanTotal(window.rate.planB.value);
                const planC = this.getPlanTotal(window.rate.planC.value);
                return [
                    {name: "A方案", id: 0, amount: planA, to: '/base-rate/plan-detail?plan=A'},
                    {name: "B方案", id: 1, amount: planB, to: '/base-rate/plan-detail?plan=B'},
                    {name: "C方案", id: 2, amount: planC, to: '/base-rate/plan-detail?plan=C'}
                ]
            }
        },

        methods: {
            getPlanTotal(items) {
                let result = 0;
                items.forEach(item => result = (result * 10 + item.value * 10) / 10);
                return result;
            },
            up() {
                if (this.activeId == 0) {
                    this.page.skipCount = 3;
                } else if (this.activeId == 3) {
                    this.page.skipCount = 0;
                }

                if (this.activeId == 0) {
                    this.activeId = this.menus[this.menus.length - 1].id;
                } else {
                    this.activeId = this.activeId - 1;
                }
            },
            down() {
                if (this.activeId == 2) {
                    this.page.skipCount = 3;
                } else if (this.activeId == 5) {
                    this.page.skipCount = 0;
                }

                if (this.activeId == this.menus[this.menus.length - 1].id) {
                    this.activeId = 0;
                } else {
                    this.activeId = this.activeId + 1;
                }
            },

            back() {
                this.$router.push("/base-rate?index=3");
            },
            yes() {
                const active = this.menus.find(menu => {
                    return menu.id == this.activeId;
                });
                this.$router.push(active.to);
            }
        },
        created() {
        }
    };
</script>

<style lang="less">
</style>
